<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下结构</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <style>
        .part_imgText ul {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-direction: column-reverse;
        }

        .part_imgText ul li {
            width: 50%;
        }

        .part_imgText_right img,
        .part_imgText_left img {
            width: 100%;
            height: 100%;
            background-size: 100%;
        }

        /* 左边 */
        .part_imgText_right .public_title,
        .part_imgText_left_box {
            padding: 0px 40px 0px 40px;
        }

        .part_imgText_left_box p {
            font-size: var(--f_text);
            font-weight: var(--l_text);
            color: #ffff;
        }

        .part_imgText_left_box p:first-child {
            padding-bottom: 60px;

        }

        .part_imgText_left_box p:last-child {
            padding-top: 60px;
        }

        .part_imgText_left,
        .part_imgText_right {
            position: relative;
        }

        .part_imgText_left,
        .part_imgText_right {
            width: 950px;
            height: 618px;
        }


        .part_imgText_left .part_imgText_left_box,
        .part_imgText_right .public_title {
            position: absolute;
            left: 0px;
            top: 140px;

        }

        .part_imgText_right .public_title h2 {
            padding-bottom: 22px;
        }

        .part_imgText_right .public_title p {
            padding-bottom: 60px;
        }

        .part_imgText_right .public_title span {
            font-size: var(--f_text);
            line-height: var(--l_text);
            color: var(--c_subtitle);
        }

        @media (max-width:1200px) {

            .part_imgText ul {
                display: flex;
                flex-direction: column-reverse;
            }

            .part_imgText_left,
            .part_imgText_right {
                width: 100%;
                height: 100%;
            }

            .part_imgText_right img {
                width: 100%;
                height: 100%;
            }
            .part_imgText_right .public_title p{
                padding-bottom: 20px;
            }

            .part_imgText ul li {
                width: 100%;
                padding: 0px 20px;
            }

            .part_imgText_left .part_imgText_left_box,
            .part_imgText_right .public_title {
                position: absolute;
                left: 0px;
                top: 20px;
            }

            .part_imgText_left_box p:last-child {
                padding-top: 20px;
                overflow: hidden;
            }

            .part_imgText_left_box p:first-child {
                padding-bottom: 20px;
                overflow: hidden;
            }


            /* 字体大小 */
            .part_imgText_right .public_title,
            .part_imgText_left_box {
                padding: 0px 20px;

            }

            .part_imgText_left_box p {
                font-size: var(--f_describe);
                font-weight: var(--l_describe);
            }
            .part_imgText_left_box p:last-child,
            .part_imgText_right .public_title span {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
            }
        }
    </style>
</head>

<body>
    <div class="part_imgText title_center modular ">
        <ul>
            <li>
                <div class="part_imgText_left">
                    <img src="../images/part_imgTex7_1_one.jpg" alt="">
                    <div class="part_imgText_left_box">
                        <p>专注数字化咨询与产品设计</p>
                        <p>FOCUS ON DIGITAL CONSULTATION AND PRODUCT DESIGN</p>
                        <p>我们期望与你共享这十余年的行业与产品经验，显著地减少试错成本，
                            共担风险走过曾经数次成功的道路。我们是坚定的产品与服务核心论者，
                            相信商业逻辑在产品的完美呈现，为用户与资本提供充分的想象空间。</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="part_imgText_right">
                    <img src="../images/part_imgTex7_1_two.jpg" alt="">
                    <div class="public_title">
                        <h2>ABOUT</h2>
                        <p>我们期望与你共享行业与传媒经验</p>
                        <span>凭着XX文化传媒的媒体优势以及出色的技术和服务，
                            XX文化传媒已经成为省内外领先的综合服务提供商。
                            公司与多家省内外知名企业建立起了广泛良好的合作关系。
                            较好的服务质量，完美的客户体验以及高水准的专业服务团队。
                        </span>
                        <a href=""></a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>